<template>
  <div>
    <div class="header">
      <van-search
        v-model.lazy="value"
        shape="round"
        background="#ffff"
        placeholder="搜索歌曲，歌手，专辑"
      />
    </div>

    <van-cell-group
      v-show="searchSuggest.length != 0"
      v-for="(song, index) in searchSuggest"
      :key="index"
      @click="getMoreSong(song)"
    >
      <van-cell class="songs" :title="song.keyword">
        <template #right-icon>
          <van-icon name="ellipsis" />
        </template>
      </van-cell>
    </van-cell-group>

    <div class="search" v-show="searchSuggest.length == 0">
      <h3 class="title">热门搜索</h3>
      <ul>
        <li
          v-for="(item, index) in hotSeach"
          :key="index"
          @click="keySearch(item.first)"
        >
          {{ item.first }}
        </li>
      </ul>
      <van-cell-group>
        <!-- 搜索历史 -->
        <van-cell title="......" icon="clock-o">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="cross" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      value: "",
      timer: "",
      searchHistory:''
    };
  },
  computed: {
    ...mapState({
      hotSeach: (state) => state.Search.hotSearch,
      searchSuggest: (state) => state.Search.searchSuggest,
    }),
    songs() {
      return this.searchSuggest.songs;
    },
  },
  mounted() {
    this.value = ""; //因为这个列表是根据value来的,必须清空
    this.$store.dispatch("getHotSearch");
    this.searchHistory=sessionStorage.searchHistory;
  },
  watch: {
    value(newval, oldval) {
      this.$store.dispatch("getSearchSuggest", this.value); //看了心有余悸了属于是
    },
  },
  methods: {
    keySearch(key) {
      this.value = key;
    },
    getMoreSong(song) {
      let searchHistory=sessionStorage.getItem('searchHistory');
      if(!searchHistory){//此时记录为空,直接插入
      // 会话存储和本地存储不可以直接存数组
        searchHistory=[song.keyword];
      }
      else{//此时记录不为空,追加记录
        searchHistory=JSON.parse(searchHistory);
        // searchHistory.push(song.keyword);
      }
      sessionStorage.setItem('searchHistory',JSON.stringify(searchHistory));
      this.$router.push({
        name: "MoreSong",
        query: {
          song: song.keyword,
        },
      });
    },
  },
  beforeDestroy() {
    this.timer = null;
  },
};
</script>

<style scoped lang="css">
.header {
  position: relative;
}
.header ul {
  font-size: 0.3733rem;
  font-weight: 700;
  position: absolute;
  width: 100%;
  border: 1px solid rgb(236, 236, 236);
  box-shadow: 1px 1px 2px 2px rgb(189, 189, 189);
}
.header ul li {
  border-top: 1px solid rgb(212, 212, 212);
  background-color: rgb(253, 127, 127);
  padding: 2px 0.5333rem;
  line-height: 0.48rem;
  opacity: 1;
}
.van-search {
  border-bottom: 1px solid rgb(229, 229, 229);
}
.search {
  padding: 0.4rem 0.2667rem 0;
}
.title {
  font-size: 0.32rem;
  color: #666;
}
.search ul {
  margin: 0.1667rem 0px 0.1067rem;
}
.search ul li {
  height: 0.8533rem;
  line-height: 0.8533rem;
  margin: 0px 0.2133rem 0.1rem 0px;
  padding: 0px 14px;
  font-size: 0.3733rem;
  display: inline-block;
  border: 1px solid rgb(198, 198, 198);
  border-radius: 0.4267rem;
}
.songs {
  overflow: hidden;
}
.play-icon {
  position: absolute;
  right: 0.2666667rem;
  top: 0.4666667rem;
  font-size: 0.5867rem;
  color: gray;
  border: 1px solid gray;
  border-radius: 0.6667rem;
}
</style>